<template>
  <div class="class-arrange">
    <h3>排课管理</h3>
    <div class="content">
      <RouterLink
        class="component"
        v-for="item in classifyList"
        :key="item.id"
        :to="{
          path: '/classClassify',
          query: {
            name: item.name,
          },
        }"
      >
        <Arrange>{{ item.name }}</Arrange>
      </RouterLink>
    </div>
  </div>
</template>

<script setup lang="ts" name="ClassArrange">
import { RouterLink } from "vue-router";
import Arrange from "./Arrange.vue";
import { ref } from "vue";

let classifyList = ref([
  {
    id: "abc001",
    name: "我的选课",
  },
  {
    id: "abc002",
    name: "我的考表",
  },
  {
    id: "abc003",
    name: "我的课表",
  },
  {
    id: "abc004",
    name: "我的成绩",
  },
  {
    id: "abc005",
    name: "学分统计",
  },
]);
</script>

<style scoped>
.class-arrange {
  background-color: rgb(223, 250, 250);
  box-shadow: 0 0 10px;
  border-radius: 10px;
}
.content {
  display: flex;
  justify-content: space-evenly;
}
Arrange {
  display: flex;
}
.component {
  text-decoration: none;
}
</style>